<script lang="ts" setup>
import { reactive } from 'vue'
import type { SegmentItem } from '@/types/interface'
import useMainLibraryFullScreen from '@/utils/useMainLibraryFullScreen/index'
import fullScreen from '@/assets/fullScreen.jpg'
import normalScreen from '@/assets/normalScreen.jpg'

// 地图类型分段选择器
const mapSegmentItems = reactive<SegmentItem[]>([
    {
        type: 1,
        title: '3D可视化',
        isSelect: false
    },
    {
        type: 2,
        title: '平面视图',
        isSelect: true
    }
])

const mapSelectedDone = (type : Number)=>{
    console.log('type:' + type)
}

// 仓库位置分段选择器
const libraryPositionSegmentItems = reactive<SegmentItem[]>([
    {
        type: 1,
        title: '一楼立库区',
        isSelect: true
    },
    {
        type: 2,
        title: '一楼平库区'
    },
    {
        type: 3,
        title: '二楼平库区'
    },
    {
        type: 4,
        title: '钢模厂房'
    },
    {
        type: 5,
        title: '地下室楼平库区'
    }
])

const libraryPositionSelectedDone = (type : Number)=>{
    console.log('type:' + type)
}

// 仓库分区选择器
const librarySectionSegmentItems = reactive<SegmentItem[]>([])
for(let i = 0; i < 200;i++){
    librarySectionSegmentItems.push({
        type: i,
        title: 'A区' + i + '排',
        isSelect: (i == 0)
    })
}

const librarySectionSelectedDone = (type : Number)=>{
    console.log('type:' + type)
}

// 切换仓库是否全屏
const { changeMainLibraryFullScreen,getMainLibraryIsFullScreen } = useMainLibraryFullScreen()
const isMainLibraryFullScreen = getMainLibraryIsFullScreen()

</script>

<template>
    <div class="full-w">
        <MapSegment :selectItems="mapSegmentItems" @selectedDone="mapSelectedDone"></MapSegment>
        <SepTitle class="m-t-10" :isShowTitleArea="false">
            <template #header>
                <div class="row-normal-space-between-wrap p-a-10 p-b-15" :class="[isMainLibraryFullScreen&&'libraryNormalBorder3']">
                    <LibraryPositionSegment :selectItems="libraryPositionSegmentItems" @selectedDone="libraryPositionSelectedDone"></LibraryPositionSegment>
                    <div class="row-normal">
                        <!-- 表单 -->
                        <div v-if="isMainLibraryFullScreen">
                            <SearchForm></SearchForm>
                        </div>
                        <!-- 全屏 -->
                        <span class="m-l-5 cursor-pointer" @click="changeMainLibraryFullScreen">
                            <img class="full-screen-img" :src="isMainLibraryFullScreen ? normalScreen : fullScreen" alt="">
                        </span>
                    </div>
                </div>
            </template>
        </SepTitle>
        <div class="full-w row-normal-start leftBottomToRightToLinear-gradient p-a-13" :class="[!isMainLibraryFullScreen&&'main-center',isMainLibraryFullScreen&&'full-main-center']">
            <MainLibrarySection class="full-h flex-shrink-0" :selectItems="librarySectionSegmentItems" @selectedDone="librarySectionSelectedDone"></MainLibrarySection>
            <MainLibraryShowDetail class="full-h flex-grow-1"></MainLibraryShowDetail>
        </div>
         <!-- 入库、出库记录及库龄分布占比 -->
         <div v-show="!isMainLibraryFullScreen" class="full-w m-t-20 row-normal">
            <div class="row-normal full-w-0">
                <LibrarySectionStatistics class="full-w-0-g-4"></LibrarySectionStatistics>
                <LibraryNumPercent class="m-l-10 full-w-0-g-3"></LibraryNumPercent>
            </div> 
        </div>
    </div>
</template>   

<style lang="stylus" scoped>
@import "stylus-px2rem";
@import url('@/css/normal.styl');

.main-center
    height 392px

.full-main-center
    height 100vh

.full-screen-img
    width 18px
    height 18px

</style>